import { Canvas, Story, Meta, ArgsTable } from '@storybook/addon-docs'
import { ElButton } from 'element-plus'
import {
  successNotify,
  waitingNotify,
  errorNotify,
  warningNotify,
} from '@/utils/notification'

<Meta
  title="工具/通知（ElNotification）"
  component={ElButton}
  argTypes={{
    message: {
      control: {
        type: 'text',
      },
      description: '通知内容',
      table: {
        category: '非API信息，仅供调试用',
      },
    },
  }}
  parameters={{
    docs: {
      source: {
        code: null,
      },
    },
  }}
/>

export const Template = args => {
  return {
    components: { ElButton },
    setup() {
      return { args, successNotify, waitingNotify, errorNotify, warningNotify }
    },
    template: `
      <el-button @click="successNotify(args.message)" type="success">成功</el-button>
      <el-button @click="waitingNotify(args.message)" type="info">等待</el-button>
      <el-button @click="warningNotify(args.message)" type="warning">警告</el-button>
      <el-button @click="errorNotify(args.message)" type="danger">失败</el-button>
    `,
  }
}

# 通知（ElNotification）

## 展示

<Canvas>
  <Story
    name="默认"
    args={{
      message: '这是一条通知消息',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="默认" />

## 使用方法

```typescript dark
// 按需引入
// notification就是原版El组件，不过加上了默认自定义样式
import notification, {
  // 简易使用版，只需要传入一个参数，标题和过渡时间都已固定
  // 成功
  successNotify,
  // 等待
  waitingNotify,
  // 警告
  warningNotify,
  // 失败
  errorNotify,
} from '@/utils/notification'

// 等待弹窗，会弹出一个提示「需要等待」的弹窗，不会自动关闭
// 接收它的返回值，然后在等待结束后给它close
const wait = waitingNotify('请等待')
wait.close()
```
